﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>订单详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <!--公有引用-->
    <link rel="stylesheet" th:href="@{/css/weui.css}" />
    <link rel="stylesheet" th:href="@{/css/weui2.css}" />
    <link rel="stylesheet" th:href="@{/css/weui3.css}" />
</head>
<body>
    <!--详情-->
    <div class="pay_title_box" style="position: fixed;z-index:2;top:0;" th:if="${!order.hasPaid}">
        <span class="countdown"></span>
    </div>
    <div class="weui_cells" style="padding-top:20px;">
        <div class="weui_media_box weui_media_appmsg">
            <div class="weui_media_hd">
                <img class="weui_media_appmsg_thumb" th:src="${order.playImage}" />
            </div>
            <div class="weui_media_bd">
                <h4 class="weui_media_title" th:text="${order.playName}"></h4>
                <p class="weui_media_desc f-red"><i class="icon icon-51"></i><span th:text="${order.playDate}"></span></p>
                <p class="weui_media_desc"><i class="icon icon-46"></i> 长沙红太阳</p>
                <p class="weui_media_desc"><i class="icon icon-69"></i> 长沙市天心区劳动西路347号田汉大剧院</p>
            </div>
            <div class="weui_order_ft"><a href="javascript:;" class="weui_btn weui_btn_mini weui_btn_default"></a></div>
        </div>
    </div>

    <div class="weui-form-preview">
        <div class="weui-form-preview-hd">
            <label class="weui-form-preview-label">总额</label>
            <em class="weui-form-preview-value" th:text="${'¥'+order.payAmount}"></em>
        </div>
        <div class="weui-form-preview-bd">
            <p>
                <label class="weui-form-preview-label" th:text="${order.playDate}"></label>
                <span class="weui-form-preview-value"></span>
            </p>
            <p>
                <label class="weui-form-preview-label">张数</label>
                <span class="weui-form-preview-value" th:text="${order.quantity}+'张'"></span>
            </p>
        </div>
        <div class="weui-form-preview-ft" style="text-align: left; line-height: 30px; padding: 5px 15px;">
            <ol class="weui-form-preview-value" style="color: #999; font-size: 14px;">
                <li th:each="seat : ${order.seats}" th:text="${seat.formatDesc}"></li>
            </ol>
        </div>
    </div>
    <div class="weui-form-preview">
        <div class="weui-form-preview-bd">
            <p>
                <label class="weui-form-preview-label">订单编号</label>
                <span class="weui-form-preview-value" th:text="${order.tradeNo}"></span>
            </p>
            <p>
                <label class="weui-form-preview-label">订单时间</label>
                <span class="weui-form-preview-value" th:text="${order.formatCreateTime}"></span>
            </p>
            <p>
                <label class="weui-form-preview-label">订单状态</label>
                <span class="weui-form-preview-value f-red" th:text="${order.formatStatus}"></span>
            </p>
            <p>
                <label class="weui-form-preview-label">配送方式</label>
                <span class="weui-form-preview-value">自取</span>
            </p>
            <p>
                <label class="weui-form-preview-label">真实姓名</label>
                <span class="weui-form-preview-value" th:text="${order.name}"></span>
            </p>
            <p>
                <label class="weui-form-preview-label">电话号码</label>
                <span class="weui-form-preview-value" th:text="${order.phone}"></span>
            </p>
            <p>
                <label class="weui-form-preview-label">取票地址</label>
                <span class="weui-form-preview-value">长沙市天心区劳动西路347号田汉大剧院</span>
            </p>
        </div>
        <div class="weui-form-preview-ft" style="text-align: left; line-height: 30px; padding: 5px 15px;">
            <div class="weui-form-preview-value" style="color: #999; font-size: 14px;">
                温馨提示：请在演出时间前30分钟取票，过时作废！
            </div>
        </div>
    </div>
    <div class="weui_cells_title" style="height:10px;">&nbsp;</div>
    <div class="weui-flex actions">
        <div class="weui-flex-item " th:if="${!order.hasPaid}"><a href="javascript:;" data-action="cancel_order" th:attr="data-id=${order.orderId}" class="weui_btn  noradius" style="background-color: #fff; color: #000;">取消订单</a></div>
        <div class="weui-flex-item" th:if="${!order.hasPaid}"><a href="javascript:;" data-action="submit_order" th:attr="data-id=${order.orderId}" class="weui_btn weui_btn_warn  noradius">确认支付</a></div>
         <div class="weui-flex-item" th:if="${order.hasPaid}"><a href="javascript:;" data-action="show_code" th:attr="data-id=${order.orderId},data-code=${order.playCode}" class="weui_btn weui_btn_warn  noradius">查看取票码</a></div>
    </div>
    <script th:src="@{/js/zepto.min.js}"></script>
    <script th:src="@{/js/jquery/mc_common.js}"></script>
    <script>
    	if($(".actions a").length > 1){
    		//15分钟后付款关闭
            var t = 900;//秒数
            function showtime () {
                var m = parseInt((t % (3600 * 24)) % 3600 / 60);
                if (m < 10) {
                    m = "0" + m;
                }
                var s = parseInt((t % (3600 * 24)) % 60);
                if (s < 10) {
                    s = "0" + s;
                }
                var c = (m == "00") ? "" : '<span>' + m + '</span>:';
                var d = (s == "00") ? "" : '<span>' + s + '</span>';
                t = t - 1;
                if (t < 0){
                    $('.countdown').html("支付时间已到，订单付款已关闭！");
                    $('#submit_order').addClass("weui_btn_disabled").removeAttr('href').removeAttr('onclick');
                    //需要ajax处理改变订单状态为已关闭，防止刷新后付款localhost

                }
                else
                    $('.countdown').html("支付剩余时间：" + c + d);
            }
            showtime();
            setInterval("showtime()", 1000);
    	}
            //取消订单
            $(".actions").on("click", "a", function () {
            	var me = $(this);
            	var action = me.data('action');
            	var orderId = me.data('id');
            	if(action === 'cancel_order'){
                    $.confirm("您确定要取消订单吗?", "提示", function () {
                    	 $.ajax({
                             type: "GET",
                             url: "/wechat/cancelOrder",
                             data: {orderId:orderId},
                             complete : function(XHR, TS){
                                 var response = {code : -1,msg:'system error'};
                                 try{
                                     response = JSON.parse(XHR.responseText);
                                 }catch(e){;}
                                 if(response.code === 0){
                                	 $.alert('订单取消成功！','操作提示');
                                 }else{
                                 	$.alert(response.msg,'操作提示');
                                 }
                             }
                         });
                    });
            	}else if(action === 'submit_order'){
            		if(me.text() !== '确认支付'){
                        return;
                    }
            		me.text('正在支付..');
            	    $.ajax({
                        type: "POST",
                        url: "/wechat/pay",
                        data: {orderId:orderId},
                        complete : function(XHR, TS){
                            var response = {code : -1,msg:'system error'};
                            try{
                                response = JSON.parse(XHR.responseText);
                            }catch(e){;}
                            if(response.code === 0){
                                WeixinJSBridge.invoke('getBrandWCPayRequest',response.data,function(res){
                                 	me.text('确认支付');
                                    if(res.err_msg == 'get_brand_wcpay_request:ok'){
                                         $.alert('支付成功！','支付提示');
                                    } else if (res.err_msg == 'get_brand_wcpay_request:fail'){
                                    	$.alert('支付出现问题，请稍后再试！','支付提示');
                                    } else if (res.err_msg == 'get_brand_wcpay_request:cancel'){
                                    	$.alert('已取消支付，请重新支付！','支付提示');
                                    } else {
                                    	$.alert('支付被拒绝了','支付提示');
                                    }
                                });
                            }else{
                            	$.alert(response.msg,'支付提示');
                            }
                        }
                    });
            	}else if(action === 'show_code'){ // 取票码
            		$.alert(orderId+111, "取票码");
            	}else{
            		//
            	}
            });
    </script>
</body>
</html>
